<template>
    <view class="container">
      
        
        <!-- 搜索框 -->
        <view class="search-container">
            <view class="search-box">
                <text class="iconfont icon-search"></text>
                <input 
                    type="text" 
                    placeholder="搜索用户名或电话" 
                    @input="onSearchInput"
                    placeholder-class="placeholder-style"
                />
            </view>
        </view>
        
        <!-- 固定表头 -->
        <view class="table-header">
            <view class="header-cell user-name">用户名</view>
            <view class="header-cell phone">电话</view>
        </view>
        
        <!-- 列表容器，支持滚动 -->
        <scroll-view 
            class="list-container" 
            scroll-y="true"
            @scrolltolower="loadMore"
            refresher-enabled="true"
            @refresherrefresh="onRefresh"
            :refresher-triggered="refresherTriggered"
        >
            <!-- 列表项 -->
            <view class="list-item" v-for="(item, index) in filteredList" :key="index">
                <view class="item-cell user-name">{{item.name}}</view>
                <view class="item-cell phone">{{item.phone}}</view>
            </view>
            
            <!-- 加载更多提示 -->
            <view class="loading-more" v-if="isLoading">
                <text class="loading-text">加载中...</text>
            </view>
            
            <!-- 无更多数据提示 -->
            <view class="no-more-data" v-if="!isLoading && filteredList.length >= total">
                <text class="no-more-text">已加载全部数据</text>
            </view>
            
            <!-- 空状态 -->
            <view class="empty-state" v-if="filteredList.length === 0 && !isLoading">
                <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
                <text class="empty-text">暂无邀请记录</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 模拟数据
            originalList: [],
            filteredList: [],
            page: 1,
            pageSize: 10,
            total: 0,
            isLoading: false,
            searchKeyword: '',
            refresherTriggered: false
        }
    },
    onLoad() {
        this.loadData();
    },
    methods: {
        // 加载数据
        loadData() {
            this.isLoading = true;
            // 模拟API请求延迟
            setTimeout(() => {
                // 生成模拟数据
                const newData = [];
                const startIndex = (this.page - 1) * this.pageSize + 1;
                const endIndex = Math.min(startIndex + this.pageSize - 1, 100);
                
                for (let i = startIndex; i <= endIndex; i++) {
                    newData.push({
                        id: i,
                        name: `用户${i}`,
                        phone: `1380013800${i % 10}`
                    });
                }
                
                // 如果是第一页，清空列表
                if (this.page === 1) {
                    this.originalList = [];
                }
                
                this.originalList = [...this.originalList, ...newData];
                this.total = 100; // 假设总共有100条数据
                this.filterList();
                this.isLoading = false;
                this.refresherTriggered = false;
            }, 800);
        },
        
        // 筛选列表
        filterList() {
            if (!this.searchKeyword) {
                this.filteredList = [...this.originalList];
                return;
            }
            
            const keyword = this.searchKeyword.toLowerCase();
            this.filteredList = this.originalList.filter(item => {
                return item.name.toLowerCase().includes(keyword) || 
                       item.phone.includes(keyword);
            });
        },
        
        // 搜索输入事件处理
        onSearchInput(e) {
            this.searchKeyword = e.detail.value.trim();
            this.page = 1;
            this.filterList();
        },
        
        // 加载更多
        loadMore() {
            if (this.isLoading || this.originalList.length >= this.total) {
                return;
            }
            
            this.page++;
            this.loadData();
        },
        
        // 下拉刷新
        onRefresh() {
            this.page = 1;
            this.loadData();
        }
    }
}
</script>

<style lang="scss">
.container {
    height: 100vh;
    background-color: #f7f7f7;
}

.page-header {
    padding: 30rpx 30rpx 20rpx;
    background-color: #fff;
}

.page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.search-container {
    padding: 20rpx 30rpx;
    background-color: #fff;
}

.search-box {
    display: flex;
    align-items: center;
    height: 72rpx;
    padding: 0 24rpx;
    background-color: #f2f2f2;
    border-radius: 36rpx;
    
    .iconfont {
        font-size: 28rpx;
        color: #999;
        margin-right: 12rpx;
    }
    
    input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        height: 100%;
    }
}

.placeholder-style {
    color: #999;
    font-size: 28rpx;
}

.table-header {
    display: flex;
    background-color: #fff;
    border-bottom: 2rpx solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
    justify-content: space-between;
    .header-cell {
        padding: 24rpx 0;
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
		text-align: center;
    }
    
    .user-name {
        width: 50%;
    }
    
    .phone {
        width: 50%;
    }
}

.list-container {
    height: calc(100vh - 220rpx);
    background-color: #fff;
}

.list-item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f7f7f7;
    
    .item-cell {
        font-size: 28rpx;
        color: #666;
		text-align: center;
    }
    
    .user-name {
        width: 50%;
    }
    
    .phone {
        width: 50%;
    }
}

.loading-more, .no-more-data {
    padding: 30rpx 0;
    text-align: center;
}

.loading-text, .no-more-text {
    font-size: 24rpx;
    color: #999;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    
    .empty-image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 20rpx;
        opacity: 0.6;
    }
    
    .empty-text {
        font-size: 28rpx;
        color: #999;
    }
}
</style>    